import React from 'react';
import { Form, Input, Checkbox,message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import {SavaUserToken,SavaUserName} from '../../common/auth.js'
import './index.css'
import http from '../../service/http';
export default function Login() {
  const [codeObj,setCodeObj]= React.useState(null)
  React.useEffect(()=>{
    http.getCode().then(res=>{
      if(!res.status===200){return}
      setCodeObj(res.data)
    })
  },[])
  const [loginFrom]=Form.useForm()
  const register = useNavigate()
  const onFinish = async () => {
    try{
      const fieldsValue = await loginFrom.validateFields()
      console.log({...fieldsValue,verKey:codeObj.verKey})
      http.login({...fieldsValue,...codeObj}).then((res)=>{
        if(res.code===200){
          SavaUserToken(res.data.token)
          SavaUserName(res.data.username)
          register('/home')
          message.success('登入成功!')
        }
      })
    }
    catch{
      message.error('登入失败!')
    }
  };
  return (
    <div className='login-bg'>
      <Form
      name="loginFrom"
      form={loginFrom}
      className="login-form"
      initialValues={{
        remember: true,
        username:'15170718283',
        password:'123456'
      }}
      onFinish={onFinish}
      style={{width:'350px',padding:'0 60px 20px 60px',background:'#ffffff',borderRadius:'10px'}}
    >
      <div style={{textAlign:'center',fontSize:'25px',margin:'20px 20px'}}>南客后台管理</div>
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入你的用户名!',
          },
          {
            pattern:/^\d{11}$/,
            message: '请输入11个数字!',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入你的密码!',
          },
          {
            pattern:/\w{6,20}/gi,
            message: '请输入6-20个字符！',
          },
        ]}
      >
        <Input.Password
          prefix={<LockOutlined className="site-form-item-icon" />}
          placeholder="密码"
        />
      </Form.Item>
      <Form.Item
        name="verCode"
        rules={[
          {
            required: true,
            message: '请输入验证码!',
          },
          {
            pattern:/\w{4}/gi,
            message: '请输入4个字符',
          },
        ]}
      >
        <div style={{display:'flex',height:'30px'}}>
          <Input
            placeholder="验证码"
            style={{flex:'1'}}
          />
          {codeObj?<img src={codeObj.base64} alt='点击切换' style={{flex:'1'}} onClick={()=>{
            http.getCode().then(res=>{
              if(!res.status===200){return}
              setCodeObj(res.data)
            })
          }}></img>:''}
        </div>
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住</Checkbox>
        </Form.Item>

        <div className="login-form-forgot" onClick={()=>{
          message.info('请联系管理员qq2338973980')
        }}>
          忘记密码？
        </div>
      </Form.Item>

      <Form.Item>
        <button htmlType="submit" className="login-form-button">
          登录
        </button>
        或者 <span style={{cursor:'pointer',color:'rgb(233, 153, 254)'}} onClick={()=>{
          message.info('请联系管理员qq2338973980')
        }}>现在注册!</span>
      </Form.Item>
      </Form>
    </div>
  );
};
